<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>poker</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-size: 2vmin;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: black;
    }

    .contain {
      position: relative;
      width: 40rem;
      height: 25rem;
    }

    .poker,
    .shade {
      position: absolute;
      width: 15rem;
      height: 20rem;
      background-color: gold;
      border-radius: 20px;
      border: 4px solid palegreen;
      transform-origin: bottom left;
      overflow: hidden;
      top: 20%;
      left: 0%;
    }

    img {
      position: relative;
      height: 100%;
    }

    .shade {
      background-color: #fff;
      z-index: 9999;
      opacity: 0.5;
    }

    .shade:hover {
      cursor: pointer;
      background-color: #eee;
    }

    .poker1 {
      transform: translate(40%, 0) rotate(-16deg);
    }

    .poker2 {
      transform: translate(70%, -10%) rotate(-12deg);
    }

    .poker3 {
      transform: translate(100%, -12%) rotate(-8deg);
    }

    .poker4 {
      transform: translate(120%, -8%) rotate(-4deg);
    }

    .poker5 {
      transform: translate(150%, -4%) rotate(4deg);
    }

    div {
      user-select: none;
    }
  </style>
</head>

<body>
  <div class="contain">
    <div class="poker poker1">
      <img src="./photos/photo (0).webp" alt="">
    </div>
    <div class="poker poker2">
      <img src="./photos/photo (1).webp" alt="">
    </div>
    <div class="poker poker3">
      <img src="./photos/photo (2).webp" alt="">
    </div>
    <div class="poker poker4">
      <img src="./photos/photo (3).webp" alt="">
    </div>
    <div class="poker poker5">
      <img src="./photos/photo (4).webp" alt="">
    </div>
    <div class="poker5 shade" onclick="poker.click()"></div>
  </div>

  <script>
    const poker = {
      // 需要轮播的图片
      imgs: [],
      imgs_index: 0,
      transform_data: [
        "translate(40%, 0) rotate(-16deg)",
        "translate(70%, -10%) rotate(-12deg)",
        "translate(100%, -12%) rotate(-8deg)",
        "translate(120%, -8%) rotate(-4deg)",
        "translate(150%, -4%) rotate(4deg)"
      ],
      poker_list: [],
      init() {
        this.poker_list = [...document.querySelectorAll('.poker')]
        this.imgs_index = this.poker_list.length
        // 创建需要轮播所有图片
        for (let i = 0; i < 10; i++) {
          const img = new Image()
          img.src = `./photos/photo (${i}).webp`

          this.imgs.push(img)
        }

        // 设置每个poker动画和索引
        this.poker_list.forEach((item, index) => {
          item.style.transition = 'transform .5s'
          item.count = index
        })
      },
      click() {
        // 将每个poker移动到下一个poker位置
        this.poker_list.forEach((item, index) => {
          // 下一个位置的索引
          let count = item.count
          count += 1
          // 把最后的poker放到最前面来，实现轮播效果
          if (count >= this.poker_list.length) {
            count = 0
            item.style.transition = ''

            // 轮播到最后一张图片时，重新设置图片
            item.querySelector('img').src = this.imgs[this.imgs_index].src
            this.imgs_index++
            // 如果轮播图到最后一张，则重新开始
            if (this.imgs_index >= this.imgs.length) {
              this.imgs_index = 0
            }
          }
          else {
            item.style.transition = 'transform .5s ease'
          }

          // 保证前面的轮播图压住后面的轮播图
          item.style.zIndex = count
          item.style.transform = this.transform_data[count]
          // 更新poker位置
          item.count = count
        })
      }
    }

    poker.init()
  </script>
</body>

</html>